<template>
  <view :class="classNameList">
    <view v-if="header" class="_header">
      <template v-if="header.title">
        <view v-if="header.pic || header.icon" class="_icon">
          <x-image v-if="header.pic" :src="header.pic" />
          <x-icon v-if="header.icon" :name="header.icon" size="32" />
        </view>
        <text class="_strong">{{ header.title }}</text>
        <text v-if="header.desc" class="_desc">{{ header.desc || '' }}</text>
      </template>
      <template v-else>
        <text class="_strong">{{ header }}</text>
      </template>
    </view>
    <view :style="[blockStyle]" class="_content">
      <view :style="[ulStyle]" class="_ul">
        <view v-for="(item, index) in detail" :key="index" class="_li">
          <view :class="['_item', {transparent}]">
            <view v-if="item.avatar" class="_avatar">
              <x-image :src="item.avatar" />
            </view>
            <view class="_dl">
              <view class="_dt">{{ item.name }}</view>
              <view v-if="type === 'plain'" class="_dd">
                购买了该商品，{{ item.time }}分钟前
              </view>
              <view v-else-if="type === 'group'" class="_dd" v-html="item.desc" />
              <view v-else-if="item.desc" class="_dd">
                <view>{{ item.desc }}</view>
              </view>
            </view>
            <view v-if="buttonText" class="_tools">
              <view class="_button" @click="handledClick(item)">{{ buttonText }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'XCarousel',
  components: {
    XImage,
    XIcon
  },
  props: {
    // goods|商品，group|拼团，plain|朴素
    type: {
      type: String,
      default: 'goods'
    },
    // 数据源
    list: {
      type: Array,
      default: () => []
    },
    // 头部
    header: {
      type: [Object, String],
      default: () => null
    },
    // 最多展示几个
    max: {
      type: Number,
      default: 2
    },
    // 自动播放的间隔（ms）
    interval: {
      type: Number,
      default: 2000
    },
    // 按钮文案
    buttonText: {
      type: String,
      default: ''
    },
    isNewTemplate: {
      type: Boolean,
      default: false
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      detail: null,
      transition: null,
      index: 0,
      height: 60,
      timeout: null
    };
  },
  computed: {
    classNameList() {
      const arr = ['x-carousel', `is-${this.type}`];
      if (this.isNewTemplate) {
        arr.push('is-new-template');
      }
      return arr.join(' ');
    },
    blockStyle() {
      return {
        height: `${this.height * this.max}px`
      };
    },
    ulStyle() {
      return {
        top: this.index ? `-${this.index * this.height}px` : 0,
        transition: this.transition
      };
    }
  },
  watch: {
    list(val) {
      if (val.length > this.max) {
        this.detail = this.list.slice(0, 20);
        this.timeout && clearTimeout(this.timeout);
        this.start();
        this.$nextTick(() => {
          this.getHeight();
        });
      }
    }
  },
  created() {
    if (this.list.length > this.max) {
      this.detail = this.list.slice(0, 20);
      this.start();
    }
  },
  mounted() {
    if (this.list.length > this.max) {
      this.getHeight();
    }
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    // 获取元素高
    getHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select('._li').boundingClientRect(data => {
        this.height = data && data.height ? data.height : 60;
      }).exec();
    },
    start() {
      this.timeout = setTimeout(() => {
        if (this.index === this.detail.length - this.max) {
          this.transition = '';
          this.index = 0;
        } else {
          this.transition = 'all 0.4s linear';
          this.index++;
        }
        this.start();
      }, this.interval);
    },
    handledClick(item) {
      this.$emit('change', item);
    }
  }
};
</script>

<style lang="scss">
.x-carousel{
  background-color: #fff;

  &.is-new-template{
    border-radius: 20px;
    background: #F7F8FA;
    margin-left: var(--padding);
    margin-right: var(--padding);
    ._header{
      border-bottom: 1px solid #EBEDF0;
    }
  }
  ._header{
    padding: 24px; height: 88px; display: flex; align-items: center;
    ._icon{ width: 32px; height: 32px; margin-right: 12px;}
    ._strong{ font-size: 30px; color: $uni-color-default; font-weight: bold; padding-right: 6px;}
    ._desc{ color: #A4A4A4; font-size: 26px;}
  }
  ._content{
    overflow: hidden; position: relative;
    ._ul{ position: relative; height: 100%;}
    ._item{ display: flex; align-items: center; padding: 28px; }
    ._avatar{ width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-right: 10px; background-color: #FFFFFF;}
    ._dl{ flex: 1; padding: 0 10px 0 5px;}
    ._dt{ font-size: 30px; color: $uni-color-default; font-weight: bold; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
    ._dd{ font-size: 28px; color: $uni-color-secondary; padding-top: 5px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
    ._button{ min-width: 148px; height: 60px; line-height: 60px; font-size: 32px; text-align: center; background: $uni-color-primary; color: #fff; border-radius: 100px; white-space: nowrap;}
  }

  // 拼团
  &.is-group{
    ._header{
      background: linear-gradient(90deg, #FFE8E8 0%, rgba(255, 248, 214, 0) 99.13%); color: #FF9D2A;
      ._strong{ color: #FF9D2A;}
    }
    ._content{
      ._item{ border-bottom: 2px solid #F7F8FA; }
      ._avatar{ width: 56px; height: 56px;}
      ._dl{ display: flex; align-items: center;}
      ._dt{ font-weight: normal; font-size: 28px; width: 200px;}
      ._dd{ font-size: 28px; color: #323233; margin-left: 20px;}
      ._button{ min-width: 120px; height: 54px; line-height: 54px; font-size: 26px;}
    }
  }

  // 视频投放页上使用
  &.is-plain{
    background-color: transparent; position: relative; z-index: 10;
    ._li{ padding-bottom: 20px;}
    ._item{
      background: rgba(0, 0, 0, 1); border-radius: 50px; padding: 5px;
      &.transparent{
        background: transparent;
      }
    }
    ._avatar{ width: 40px; height: 40px;}
    ._dl{ display: flex; align-items: center; padding-right: 0;}
    ._dt{ font-size: 26px; font-weight: normal; color: #FFBB32; padding-right: 8px;display: block; -webkit-line-clamp: initial; -webkit-box-orient: initial; text-overflow: initial;overflow: auto}
    ._dd{ padding-right: 10px;font-size: 26px; padding-top: 0; color: #FFFFFF;display: block; -webkit-line-clamp: initial; -webkit-box-orient: initial; text-overflow: initial;overflow: auto}
  }
}
</style>
